<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.one {
				width: 150px;
				font-size: 20px;
				color: red;
				/*color: white;*/
				/*text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;*/
				text-shadow: -1px 0 black, 0 1px dodgerblue, 1px 0 yellow, 0 -1px darkred;
				/*text-shadow: 0 0 3px #FF0000;*/
				box-shadow: 2px 2px 5px;
			}

			.two {
				float: left;
				height: 50px;
				text-align: center;
				width: 150px;
				box-shadow: 1px 1px 5px gainsboro, -1px -1px 5px gainsboro;
			}

			.two:hover {
				box-shadow: 2px 2px 5px cornflowerblue, -2px -2px 5px cornflowerblue;
			}

			.two p {
				margin: 15px 0;
			}
		</style>
	</head>
	<body>
		<p class="one">阴影效果测试</p>
		<div class="two">
			<p>在我上面悬停！</p>
		</div>

	</body>
</html>
